<template>
  <div
    class="container"
    :checked="value"
    :border="border"
    @click="handleClick"
    :disabled="disabled"
  >
    <i class="mu-iconfont"></i>
    <span>{{ text }}</span>
  </div>
</template>
<style lang="scss" scoped>
@import "../variable.scss";

$grayBorder: #bebebe; //灰色边框
$disabledColor: #c0c4cc; //禁用字体颜色

.container {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s;

  span {
    user-select: none;
    display: inline-block;
    text-indent: 8px;
    vertical-align: middle;
  }

  i {
    border-radius: 2px;
    border: 1px solid $grayBorder;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    position: relative;

    &:hover {
      border-color: $blue;
    }

    &::after {
      content: "\e654";
      display: inline-block;
      transform: scaleY(0);
      color: white;
      font-size: 11px;
      transition: transform 0.2s;
      position: absolute;
      left: 0;
      top: 1px;
    }
  }

  &[disabled] {
    border-color: #ebeef5 !important;
    cursor: not-allowed;

    i {
      background: #f2f6fc !important;
      border-color: #dcdfe6 !important;

      &::after {
        color: $disabledColor;
      }
    }

    span {
      color: $disabledColor !important;
    }
  }

  &[checked] {
    span {
      color: $blue;
    }

    i {
      background: $blue;
      border-color: $blue;

      &::after {
        transform: scaleY(1);
      }
    }
  }

  &[border] {
    padding: 5px 10px;
    border: 1px solid $grayBorder;
    border-radius: 3px;

    &[checked] {
      border-color: $blue;
    }
  }
}
</style>
<script>
export default {
  name: "mu-checkbox",
  methods: {
    //处理单击事件
    handleClick(e) {
      if (this.disabled) {
        return;
      }
      this.$emit("input", !this.value);
      this.$emit("change", !this.value, e);
    },
  },
  props: {
    text: String, //文字
    border: Boolean, //是否有边框
    value: Boolean, //是否选中
    disabled: Boolean, //是否禁用
  },
};
</script>